<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ include file="../common/up.jsp" %>

<div class="panel">
    <div class="panel-heading">
        <span class="panel-title">${requestScope.society.society_name} 协会举办活动</span>
    </div>

    <script>
        let element;

        // 检查输入是否为空或仅包含空格
        function checkEmpty(value) {
            return !value || !value.trim();  // 判断值是否为空或者只有空格
        }

        function changeValue(ele) {
            element = ele;
            let str = ele.innerHTML;
            if (/^<.*>$/.test(str)) {
                return false;
            }
            let name = ele.getAttribute("name");
            const html = "<input name='" + name + "' value='" + str + "' onblur='show(this)'/>";
            ele.innerHTML = html;
            ele.firstElementChild.focus();
        }

        function show() {
            document.querySelector(".panel>.notice").style.display = "block";
            document.querySelector(".panel>.notice").firstElementChild.nextElementSibling.firstElementChild.onclick = submit;
            document.querySelector(".panel>.notice").firstElementChild.nextElementSibling.lastElementChild.onclick = shutdown;
        }

        // 提交更新
        function submit() {
            let parent = element.parentNode;
            let id = parent.dataset.id;
            let value = element.firstElementChild.value;

            // 检查输入框是否为空
            if (checkEmpty(value)) {
                alert("输入不能为空或仅包含空格！");
                return;  // 如果为空，阻止提交
            }

            let data = { id: id };
            data[element.getAttribute("name")] = value;

            axios.post("/activity/updateActivity", axios.transformRequest(data))
                .then((map) => {
                    element.innerHTML = value;
                    if (map.data == 1) {
                        alert("修改成功");
                    } else {
                        alert(map.data.message);
                    }
                })
                .catch((e) => {
                    alert("异常信息：" + e);
                }).finally(() => {
                document.querySelector(".panel>.notice").style.display = "none";
            });
        }

        function shutdown() {
            element.innerHTML = element.firstElementChild.value;
            document.querySelector(".panel>.notice").style.display = "none";
        }
    </script>

    <div class="notice btn-primary">
        <h3>提交</h3>
        <div class="row">
            <button class="btn btn-success col-sm-offset-2 col-sm-4" onclick="submit()">Yes</button>
            <button class="btn btn-warning col-sm-4" onclick="shutdown()">No</button>
        </div>
    </div>

    <style>
        .panel>.notice {
            display: none;
            position: fixed;
            height: 300px;
            width: 400px;
            top: calc((100% - 300px) / 2);
            left: calc((100% - 400px) / 2);
            border-radius: 10px;
        }

        .notice>h3 {
            padding: 60px 0px;
            text-align: center;
        }
    </style>

    <div class="panel-body">
        <table class="table">
            <thead>
            <th>序号</th>
            <th>活动名称</th>
            <th>活动简介</th>
            <th>开始时间</th>
            <th>结束时间</th>
            </thead>

            <tbody>
            <c:forEach items="${activities}" var="activity" varStatus="status">
                <tr data-id="${activity.activityId}">
                    <td>${status.count}</td>
                    <td>${activity.activity_name}</td>
                    <td name="intro" onclick="changeValue(this)">
                            ${activity.activity_intro}
                    </td>
                    <td>
                        <fmt:formatDate value="${activity.activity_start_time}" pattern="yyyy-MM-dd HH:mm:ss" />
                    </td>
                    <td>
                        <fmt:formatDate value="${activity.activity_end_time}" pattern="yyyy-MM-dd HH:mm:ss" />
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<%@ include file="../common/down.jsp" %>
